<template>
  <NuxtLayout name="custom">
    <div class="editPage">
      <section class="tagsBox">
        <van-tabs v-model:active="active" class="fullHeight" @click-tab="onClickTab">
          <van-tab title="支出" name="expenses">
            <Tags kind="expenses" v-model="expensesTagId"/>
          </van-tab>
          <van-tab title="收入" name="income"> 
            <Tags kind="income" v-model="incomeTagId"/>
          </van-tab>
        </van-tabs>
      </section>
      <NumberPad @submit="handleSubmit"/>
    </div>
  </NuxtLayout>
</template>
<script lang="ts" setup>
import NumberPad from '~/components/NumberPad.vue'
import Tags from '~/pages/home/editPage/components/Tags.vue'
import { useTagTabStore } from '@/store/useTagTab'
const tabStore = useTagTabStore()
const active = ref<TagType>(tabStore.curTagType)

const expensesTagId = ref()
const incomeTagId = ref()
const router = useRouter()
const signValue = computed(()=>{
  return active.value === 'expenses' ? expensesTagId.value : incomeTagId.value
})
const handleSubmit = (value: Partial<Item>) => {
  if(signValue.value === undefined){
    showDialog({ title: '错误', message: '请选择标签', width: '320px' })
    return
  }
  http.post('/item', { ...value, tag_id: signValue.value, kind: active.value }, { _autoLoading: true }).then(res=>{
    showSuccessToast({message:'添加成功',iconSize:'28px'})
    router.push('/home/billPage')
  }).catch(err=>{
    showFailToast({message:'保存失败',iconSize:'28px'})
  })
}
type TagParam={ name: TagType, title: string, event: MouseEvent, disabled: boolean }
const onClickTab = (tagMsg:TagParam) => {
  tabStore.setCurTagType(tagMsg.name)
}
</script>
<style scoped lang="scss">
.editPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  .tagsBox {
    flex: 1;
    height: 100px;
  }
}
</style>
